<template>
  <div class="person-item">
    <el-avatar shape="square" fit="cover" :size="70" :src="avatar"></el-avatar>
    <div>
      <span>{{ name }}</span>
    </div>
    <!-- 添加删除图标 添加删除演员的功能 -->
    <i class="el-icon-error" @click="deleteActor()"></i>
  </div>
</template>

<script>
export default {
  props: ["id", "name", "avatar"],
  data() {
    return {};
  },
  methods: {
    /**
     * 删除演员接口
     */
    deleteActor() {
      //弹窗问他是否删除
      this.$confirm("此操作将永久删除演员,是否继续", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //发送http请求 实现删除业务

        //用封装的
        this.$http.ActorApi.delete({id:this.id}).then((res) => {
          console.log("删除成功", res);
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功！",
            });
            //通知父组件 演员已经删除  然后更新列表
            // 通过子传父的通信方式 $emit  主动触发在父组件中监听的deleteSuccess事件
            this.$emit("deleteSuccess");
          }
        });
        // this.axios.post("/movie-actor/del", `id=${this.id}`).then((res) => {
        //   console.log("删除成功", res);
        //   if (res.data.code == 200) {
        //     this.$message({
        //       type: "success",
        //       message: "删除成功！",
        //     });
        //     //通知父组件 演员已经删除  然后更新列表
        //     // 通过子传父的通信方式 $emit  主动触发在父组件中监听的deleteSuccess事件
        //     this.$emit('deleteSuccess');
        //   }
        // });
      });
    },
  },
};
</script>

<style scoped>
.person-item {
  display: inline-block;
  margin: 20px 20px 0px 0px;
  text-align: center;
  position: relative;
}
.person-item > div > span {
  font-size: 0.9em;
}
.person-item i {
  position: absolute;
  display: none;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  cursor: pointer;
}
.person-item:hover i {
  display: block;
}
.el-avatar >>> img {
  width: 100%;
}
</style>
